<template>
  <div class="reply_box">
    <h1>评论</h1>
    <ReplyForm @submit="pushReply" />
    <div class="reply_list">
      <ReplyItem v-for="reply in replyList" :data="reply" />
    </div>
    <div class="no_reply" v-if="replyList.length === 0">
      暂无评论
    </div>
  </div>
</template>

<script setup>
import ReplyForm from "./ReplyForm.vue";
import ReplyItem from './ReplyItem.vue'
import {request} from "../../../api/baseFentch";
import {onMounted, ref} from "vue";

const props = defineProps({
  id: {
    type: String,
    required: true,
    default: 0
  }
})

const replyList = ref([])

const pushReply = async info => {
  const form = new FormData()
  form.append('target', props.id)
  form.append('layer', '1')
  form.append('content', info.content.value)
  form.append('username', info.nickname.value)
  form.append('email', info.email.value)
  const result = await request('/blog/reply', 'POST', form)
  if (result?.code === 0) {
    info.nickname.value = ''
    info.email.value = ''
    info.content.value = ''
    await getReply()
    return
  }
  console.error("Network Failed")
}

const getReply = async () => {
  const result = (await request(`/blog/reply/${props.id}`))
  if (result?.code === 0) {
    replyList.value = result?.object
  }
}

onMounted(async () => {
  await getReply()
})
</script>

<style scoped>
.reply_box {
  padding: 40px;
}

.reply_list {
  margin-bottom: 40px;
}

.no_reply {
  text-align: center;
  font-size: 32px;
  color: #999999;
  margin-bottom: 40px;
}
</style>